<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:fragment="commenhead">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>Basic Table</title>

  <link href="css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
  <link href="css/style-responsive.css" th:href="@{css/style-responsive.css}" rel="stylesheet">

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
  <script src="js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
  <![endif]-->
</head>

<body class="sticky-header">

<!-- left side start-->
<div th:fragment="leftmenu" class="left-side sticky-left-side">

  <!--logo and iconic logo start-->
  <div class="logo">
    <a href="index.html">
      <img src="images/logo.png" alt=""></a>
  </div>

  <div class="logo-icon text-center">
    <a href="index.html">
      <img src="images/logo_icon.png" alt=""></a>
  </div>
  <!--logo and iconic logo end-->

  <div class="left-side-inner">

    <!-- 头部用户个人操作 -->
    <div class="visible-xs hidden-sm hidden-md hidden-lg">
      <div class="media logged-user">
        <img alt="" src="images/photos/user-avatar.png" class="media-object">
        <div class="media-body">
          <h4>
            <a href="#">管理员</a>
          </h4>
          <span>"你好啊..."</span>
        </div>
      </div>

      <h5 class="left-nav-title">账户信息</h5>
      <ul class="nav nav-pills nav-stacked custom-nav">
        <li>
          <a href="#"> <i class="fa fa-user"></i>
            <span>用户资料</span>
          </a>
        </li>
        <li>
          <a href="#"> <i class="fa fa-cog"></i>
            <span>设置</span>
          </a>
        </li>
        <li>
          <a href="#">
            <i class="fa fa-sign-out"></i>
            <span>退出</span>
          </a>
        </li>
      </ul>
    </div>

    <!--侧边栏导航开始-->
    <ul class="nav nav-pills nav-stacked custom-nav">
      <li class="menu-list">
        <a href="index.html">
          <i class="fa fa-home"></i>
          <span>指示板</span>
        </a>
        <ul class="sub-menu-list">
          <li class="">
            <a href="index_alt.html">指示板 1</a>
          </li>
          <li>
            <a href="index.html">指示板 2</a>
          </li>
        </ul>
      </li>
      <li class="menu-list">
        <a href="">
          <i class="fa fa-laptop"></i>
          <span>布局</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="blank_page.html">空白页</a>
          </li>
          <li>
            <a href="boxed_view.html">盒装页面  居中显示</a>
          </li>
          <li>
            <a href="leftmenu_collapsed_view.html">缩小侧边栏</a>
          </li>
          <li>
            <a href="horizontal_menu.html">水平菜单</a>
          </li>

        </ul>
      </li>
      <li class="menu-list">
        <a href="">
          <i class="fa fa-book"></i>
          <span>UI 元素</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="general.html">普通样式</a>
          </li>
          <li>
            <a href="buttons.html">按钮样式</a>
          </li>
          <li>
            <a href="tabs-accordions.html">选项卡</a>
          </li>
          <li>
            <a href="typography.html">字体排版</a>
          </li>
          <li>
            <a href="slider.html">滑块</a>
          </li>
          <li>
            <a href="panels.html">折叠面板</a>
          </li>
          <li>
            <a href="widgets.html">小部件</a>
          </li>
        </ul>
      </li>
      <li class="menu-list">
        <a href="">
          <i class="fa fa-cogs"></i>
          <span>组件</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="grids.html">网格</a>
          </li>
          <li>
            <a href="gallery.html">图片画廊</a>
          </li>
          <li>
            <a href="calendar.html">日历</a>
          </li>
          <li>
            <a href="tree_view.html">树状图</a>
          </li>
          <li>
            <a href="nestable.html">可拖动组件</a>
          </li>

        </ul>
      </li>

      <li>
        <a href="fontawesome.html">
          <i class="fa fa-bullhorn"></i>
          <span>图标</span>
        </a>
      </li>

      <li class="menu-list">
        <a href="">
          <i class="fa fa-envelope"></i>
          <span>邮件</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="mail.html">收件箱</a>
          </li>
          <li>
            <a href="mail_compose.html">写邮件</a>
          </li>
          <li>
            <a href="mail_view.html">查看邮件</a>
          </li>
        </ul>
      </li>

      <li class="menu-list">
        <a href="">
          <i class="fa fa-tasks"></i>
          <span>表单</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="form_layouts.html">表单布局</a>
          </li>
          <li>
            <a href="form_advanced_components.html">先进的组件</a>
          </li>
          <li>
            <a href="form_wizard.html">表单向导</a>
          </li>
          <li>
            <a href="form_validation.html">表单验证</a>
          </li>
          <li>
            <a href="editors.html">富文本</a>
          </li>
          <li>
            <a href="inline_editors.html">内联编辑</a>
          </li>
          <li>
            <a href="pickers.html">选择器组件</a>
          </li>
          <li>
            <a href="dropzone.html">文件上传</a>
          </li>
        </ul>
      </li>
      <li class="menu-list">
        <a href="">
          <i class="fa fa-bar-chart-o"></i>
          <span>图表</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="flot_chart.html">Flot 图表</a>
          </li>
          <li>
            <a href="morris.html">莫里斯图表</a>
          </li>
          <li>
            <a href="chartjs.html">Chartjs</a>
          </li>
          <li>
            <a href="c3chart.html">C3 图表</a>
          </li>
        </ul>
      </li>
      <li class="menu-list  nav-active">
        <a href="#">
          <i class="fa fa-th-list"></i>
          <span>数据表</span>
        </a>
        <ul class="sub-menu-list">
          <li class="active">
            <a href="basic_table.html">基本表</a>
          </li>
          <li>
            <a href="dynamic_table.html">先进的表</a>
          </li>
          <li>
            <a href="responsive_table.html">响应表</a>
          </li>
          <li>
            <a href="editable_table.html">可编辑表</a>
          </li>
        </ul>
      </li>

      <li class="menu-list">
        <a href="#">
          <i class="fa fa-map-marker"></i>
          <span>地图</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="google_map.html">谷歌地图</a>
          </li>
          <li>
            <a href="vector_map.html">矢量地图</a>
          </li>
        </ul>
      </li>
      <li class="menu-list">
        <a href="">
          <i class="fa fa-file-text"></i>
          <span>其他页面</span>
        </a>
        <ul class="sub-menu-list">
          <li>
            <a href="profile.html">配置文件</a>
          </li>
          <li>
            <a href="invoice.html">发票</a>
          </li>
          <li>
            <a href="pricing_table.html">定价表</a>
          </li>
          <li>
            <a href="timeline.html">时间轴</a>
          </li>
          <li>
            <a href="blog_list.html">博客列表</a>
          </li>
          <li>
            <a href="blog_details.html">博客详情</a>
          </li>
          <li>
            <a href="directory.html">目录</a>
          </li>
          <li>
            <a href="chat.html">聊天</a>
          </li>
          <li>
            <a href="404.html">404 错误</a>
          </li>
          <li>
            <a href="500.html">500 错误</a>
          </li>
          <li>
            <a href="registration.html">注册页面</a>
          </li>
          <li>
            <a href="lock_screen.html">屏幕锁</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="login.html">
          <i class="fa fa-sign-in"></i>
          <span>登陆页面</span>
        </a>
      </li>

    </ul>
    <!--侧边栏导航结束--> </div>
</div>


<!-- 头部分开始-->
<div th:fragment="headermenu" class="header-section">

  <!--开关按钮开始-->
  <a class="toggle-btn">
    <i class="fa fa-bars"></i>
  </a>
  <!--开关按钮结束-->

  <!--搜索开始-->
  <form class="searchform" action="http://view.jqueryfuns.com/2014/4/10/7_df25ceea231ba5f44f0fc060c943cdae/index.html" method="post">
    <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
  </form>
  <!--搜索结束-->

  <!--通知菜单开始 -->
  <div class="menu-right">
    <ul class="notification-menu">
      <li>
        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
          <i class="fa fa-tasks"></i>
          <span class="badge">8</span>
        </a>
        <div class="dropdown-menu dropdown-menu-head pull-right">
          <h5 class="title">你有八个未解决的问题</h5>
          <ul class="dropdown-list user-list">
            <li class="new">
              <a href="#">
                <div class="task-info">
                  <div>数据库更新</div>
                </div>
                <div class="progress progress-striped">
                  <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
                    <span class="">40%</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="new">
              <a href="#">
                <div class="task-info">
                  <div>test2</div>
                </div>
                <div class="progress progress-striped">
                  <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
                    <span class="">90%</span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="task-info">
                  <div>test2</div>
                </div>
                <div class="progress progress-striped">
                  <div style="width: 66%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" role="progressbar" class="progress-bar progress-bar-info">
                    <span class="">66%</span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="task-info">
                  <div>test2</div>
                </div>
                <div class="progress progress-striped">
                  <div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" role="progressbar" class="progress-bar progress-bar-danger">
                    <span class="">33%</span>
                  </div>
                </div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="task-info">
                  <div>test2</div>
                </div>
                <div class="progress progress-striped">
                  <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar">
                    <span class="">80%</span>
                  </div>
                </div>
              </a>
            </li>
            <li class="new">
              <a href="">看到所有未解决任务</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
          <i class="fa fa-envelope-o"></i>
          <span class="badge">5</span>
        </a>
        <div class="dropdown-menu dropdown-menu-head pull-right">
          <h5 class="title">你有5封邮件</h5>
          <ul class="dropdown-list normal-list">
            <li class="new">
              <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user1.png" alt="" />
                                            </span>
                <span class="desc">
                                                <span class="name">
                                                    管理员
                                                    <span class="badge badge-success">new</span>
                                                </span>
                                                <span class="msg">测试数据...</span>
                                            </span>
              </a>
            </li>
            <li>
              <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user2.png" alt="" />
                                            </span>
                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
              </a>
            </li>
            <li>
              <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user3.png" alt="" />
                                            </span>
                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
              </a>
            </li>
            <li>
              <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user4.png" alt="" />
                                            </span>
                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
              </a>
            </li>
            <li>
              <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user5.png" alt="" />
                                            </span>
                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
              </a>
            </li>
            <li class="new">
              <a href="">阅读所有的邮件</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
          <i class="fa fa-bell-o"></i>
          <span class="badge">4</span>
        </a>
        <div class="dropdown-menu dropdown-menu-head pull-right">
          <h5 class="title">通知</h5>
          <ul class="dropdown-list normal-list">
            <li class="new">
              <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                <span class="name">服务器# 1超载.</span> <em class="small">34 mins</em>
              </a>
            </li>
            <li class="new">
              <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                <span class="name">服务器# 1超载.</span> <em class="small">1 hrs</em>
              </a>
            </li>
            <li class="new">
              <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                <span class="name">服务器# 1超载.</span>
                <em class="small">4 hrs</em>
              </a>
            </li>
            <li class="new">
              <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                <span class="name">服务器# 1超载.</span>
                <em class="small">4 hrs</em>
              </a>
            </li>
            <li class="new">
              <a href="">看到所有的通知</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
          <img src="images/photos/user-avatar.png" alt="" />
          管理员
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
          <li>
            <a href="#">
              <i class="fa fa-user"></i>
              用户信息
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-cog"></i>
              设置
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-sign-out"></i>
              登出
            </a>
          </li>
        </ul>
      </li>

    </ul>
  </div>
  <!--通知菜单结束 --> </div>
<!-- 头部分结束-->


<div id="commonscript">
<!-- Placed js at the end of the document so the pages load faster -->
<script th:src="@{/js/jquery-1.10.2.min.js}"></script>
<script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
<script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/modernizr.min.js}"></script>
<script th:src="@{/js/jquery.nicescroll.js}"></script>
</div>

<!--common scripts for all pages-->
<script src="js/scripts.js"></script>

</body>

</html>